<template>
  <div class="set-up">
    <PageHeader small="mini" title="版本信息" />
    <XcTable labelWidth="130px" :config="config" :value="detail" type="descriptions" :border="true" ref="tableView">
    </XcTable>
    <PageHeader small="mini" title="帮助文档" />
    <el-link type="primary" @click="handleDownLoad">文档下载</el-link>
  </div>
</template>

<script setup lang="ts">

import { useHelpStore } from "../store/helpStore";

const dataEvent = (data: any) => {
  console.log("子组件收到数据了", data);
}

defineExpose({
  dataEvent
})

// 2. 实例化组合式 store
const helpStore = useHelpStore();

// 验证存储结果
console.log("存储后 Pinia 中的值：", helpStore.sendHelpCmd);

import "@xc-components/xc-form/lib/style.css";
import "@xc-components/xc-table/lib/style.css";

import { onMounted, ref } from "vue";
import { getSystyemVersionInfo, getPreviewPDF } from "../api/global/index";
import type { ColumnItem } from "@xc-components/xc-table/types";

const config = ref<ColumnItem[]>([]);
const detail = ref({}) as any;
onMounted(() => {
  getSysInfo();
});

const getSysInfo = async () => {
  const { data } = await getSystyemVersionInfo();

  console.log("系统配置", data);

  const tableConfig: ColumnItem[] = [];
  data.forEach(({ version, name }) => {
    tableConfig.push({ label: name, prop: name });
    detail.value[name] = version;
  });
  config.value = tableConfig;
};
const handleDownLoad = async () => {
  const blob = await getPreviewPDF();
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.setAttribute("download", "帮助文档.pdf");
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};


</script>

<style lang="scss" scoped>
.list-view {
  padding: 12px;
}
</style>
